<template>
  <div class="content">
    <computer-nav :nav="nav" :selectItem="selectItem" :navName="navName"></computer-nav>

    <mobile-nav v-if="isRouterAlive" :nav="nav"></mobile-nav>

    <div class="rightContent">
      <router-view v-slot="{ Component }">
        <transition :name="transitionName" mode="out-in">
          <component :is="Component" v-if="isRouterAlive" />
        </transition>
      </router-view>
      <!-- <transition :name="transitionName" mode="out-in">
        <router-view v-if="isRouterAlive"></router-view>
      </transition> -->
    </div>
  </div>
</template>

<script>
import computerNav from "@/components/nav/computerNav.vue";
import mobileNav from "@/components/nav/mobileNav.vue";
// import api from "@/fetch/api";
import { RouteComponent } from 'vue-router';
import { Route } from 'ant-design-vue/lib/breadcrumb/Breadcrumb';

export default {
  name: "Home",
  components: {
    computerNav,
    mobileNav,
  },
  data() {
    return {
      windowWidth: "",
      isRouterAlive: true,
      transitionName: "fade-in",
      nav: [
        { name: "首页", url: "/index", icon: "icon-index" },
        { name: "所有文章", url: "/allArticle", icon: "icon-dushu" },
        { name: "关于", url: "/aboutMe", icon: "icon-my" },
        { name: "登录/注册", url: "/login", icon: "icon-shijianzhou" },
        { name: "测试", url: "/test", icon: "icon-shijianzhou" }
      ],
      selectItem: 0,
      navName:"未登录"
    };
  },
  provide() {
    return {
      //提供一个reload方法，使得手机页面在导航跳转时得到刷新
      reload: this.reload,
    };
  },
  mounted() {
    this.$store.dispatch("checkAuthState").then(res => {
      this.nav = this.nav.slice(0, 3)
      let isLogin = this.$store.getters.isLogin;
      let isAdmin = this.$store.getters.isAdmin;
      if (isLogin) {
        this.nav.push({
          name: "个人空间", url: "/space", icon: "icon-shijianzhou"
        })
      } else {
        this.nav.push({
          name: "登录/注册", url: "/login", icon: "icon-shijianzhou"
        })
      }
      if (isAdmin) {
        this.nav.push({
          name: "管理", url: "/manage", icon: "icon-yingyong"
        })
      }
      console.log("navname:",res)
      this.navName="欢迎回来，"+res
      this.changeSelect()
    }).catch(err=>{
      this.navName="未登录"
    })
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
    changeSelect(index) {
      this.selectItem = 0;
      let path = this.$route.path
      switch (path) {
        case "/allArticle":
          this.selectItem = 1
          break;
        case "/aboutMe":
          this.selectItem = 2
          break;
        case "/space":
          this.selectItem = 3
          break;
        case "/manage":
          this.selectItem = 4
          break;
        default:
          this.selectItem = 0
      }
    },
  },
  watch: {
    $route(to, from) {
      this.reload()
      this.changeSelect()
    },
  },
};
</script>

<style scoped lang="less">
.content {
  height: 100%;
  position: relative;

  .rightContent {
    position: absolute;
    top: 0;
    left: 350px;
    right: 0px;
    // background: #eaeaea;
    min-height: 100%;
    overflow: hidden;

    .slide-up-enter-active,
    .slide-up-leave-active {
      transition: all 0.5s;
    }

    .slide-up-enter,
    .slide-up-leave-to {
      transform: translateY(-100px);
      opacity: 0;
    }

    .slide-left-enter-active,
    .slide-left-leave-active {
      transition: all 0.5s;
    }

    .slide-left-enter,
    .slide-left-leave-to {
      transform: translateX(-100px);
      opacity: 0;
    }

    .fade-in-enter-active,
    .fade-in-leave-active {
      transition: all 0.5s;
    }

    .fade-in-enter,
    .fade-in-leave-to {
      opacity: 0;
    }
  }

  @media screen and (max-width: 900px) {
    .rightContent {
      position: relative;
      left: 0;
      width: 100%;
    }
  }
}
</style>